<template>
  <div>
    <ModuleHeader></ModuleHeader>
    <div class="asset-page">
      <div class="header">
        <span class="header-title">币币账户</span>
        <div class="link-box">
          <div class="header-link">财务记录</div>
          <div class="header-link">提币地址</div>
        </div>
      </div>
      <div class="tool-header">
        <div class="tool-left">
          <span class="hint">资产明细</span>
          <div class="hide-box">
            <input
              type="checkbox"
              id="hidden-checkbox"
              placeholder
              name="hidden-checkbox"
              class="hidden-checkbox"
              v-model="isHide"
              @change="hideClick()"
            />
            <label for="hidden-checkbox"></label>
            <el-tooltip class="item" effect="dark" content="小于100CNY" placement="bottom">
              <span>隐藏小额资产</span>
            </el-tooltip>
          </div>
        </div>
        <div class="tool-right">总资产：{{ $rmb(total) }} CNY</div>
      </div>
      <div class="proper-body-box" v-loading="loading">
        <div class="type-info-box">
          <span class="list-info coin-box">{{ $t("asset.currency") }}</span>
          <span class="list-info useable-box">{{ $t("asset.usable") }}</span>
          <span class="list-info frost-box">{{ $t("asset.freeze") }}</span>
          <span class="list-info ttm-box">{{ $t("asset.appraisement") }}</span>
          <span class="list-info locked-box">{{ $t("asset.hedge") }}</span>
          <span class="list-info action-box">{{ $t("asset.operation") }}</span>
        </div>
        <!-- 列表 -->
        <div v-if="dataList&&dataList.length>0"></div>
        <div v-else class="ad-list-box">
          <div class="empty-box">
            <p>{{ $t("message.nothing_data") }}</p>
          </div>
        </div>
      </div>
      <div class="fenye">
        <!-- 分页 -->
        <el-pagination
          background
          class="fenye"
          layout="prev, pager, next"
          :total="pageCount*1==0?1:pageCount"
          :page-size="10"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
    <ModuleFooter></ModuleFooter>
  </div>
</template>
<script>
import ModuleHeader from "../page-module-public/public-header.vue";
import ModuleFooter from "../page-module-public/public-footer.vue";
export default {
  data() {
    return {
      loading: true,
      hasPaypwd: "",
      // 初始请求列表数据
      asset: {
        Page: 1,
        PageSize: 10
      },
      total: 0,
      pageCount: 1,
      dataList: [],
      defaultArr: [],
      item: {
        serverAdress: ""
      },
      isOpenIndex: "",
      isHide: false
    };
  },

  methods: {
    successMsg(msg) {
      this.$message({
        showClose: true,
        message: msg,
        type: "success"
      });
    },
    errorMsg(msg) {
      this.$message.error(msg);
    },
    getDetail() {
      this.loading = false;
      let param = this.asset;
      param = JSON.stringify(param);
      param = this.$encryptByDES(param);
      this.axios
        .post(this.$baseURL + "/asset/list", {
          data: param
        })
        .then(res => {
          this.loading - true;
          if (res.data.Code == 200) {
            let data = this.$decryptByDES(res.data.Data);
            data = JSON.parse(data);
            this.pageCount = data.Count;
            if (this.isHide) {
              this.dataList = data.list.filter(function(item) {
                return item.Price >= 100;
              });
            }
          }
        });
    },
    // 请求数据的方法
    reqList() {
      this.loading = true;
      let param = this.asset;
      param = JSON.stringify(param);
      param = this.$encryptByDES(param);
      this.axios
        .post(this.$baseURL + "/asset/list", { data: param })
        .then(res => {
          this.loading = false;
          if (res.data.Code == 200) {
            let data = this.$decryptByDES(res.data.Data);
            data = JSON.parse(data);
            this.pageCount = data.Count;
            if (this.isHide) {
              this.dataList = data.List.filter(function(item) {
                return item.Price >= 100;
              });
            } else {
              this.dataList = data.List;
            }
            this.defaultArr = data.List;
            if (this.asset.Page == 1) {
              this.total = data.SumAsset;
            }
          } else {
            this.errorMsg(res.data.Msg);
          }
        });
    },
    reqUserInfo() {
      this.axios.post(this.$baseURL + "/user/userinfo").then(res => {
        if (res.data.Code == 200) {
          let data = this.$decryptByDES(res.data.Data);
          data = JSON.parse(data);
          this.hasPaypwd = data.Info.HasPaypwd;
        } else {
          this.errorMsg("数据错误，用户中心加载失败");
        }
      });
    },

    // 分页点击
    handleSizeChange(val) {
      this.asset.Page = val * 1;
      this.reqList();
    },
    handleCurrentChange(val) {
      this.asset.Page = val * 1;
      this.reqList();
    },
    refreshList() {
      this.reqList();
    },
    // 子组件的列表点击
    chardChange(val) {
      this.isOpenIndex = val;
    },
    hideClick() {
      // 数据进行过滤
      if (this.isHide) {
        this.dataList = this.dataList.filter(function(item) {
          return item.Price >= 100;
        });
      } else {
        this.dataList = this.defaultArr;
      }
    }
  },
  components: {
    ModuleHeader,
    ModuleFooter
  },
  computed: {},
  created() {
    this.reqList();
    this.reqUserInfo();
  },
  mounted() {}
};
</script>
<style scoped>
.asset-page {
  width: 1200px;
  margin: 60px auto 0 auto;
  min-height: calc(100vh - 395px);
}
.asset-page .header {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 0 29px;
}
.header-title {
  color: #333333;
  font-size: 24px;
  font-weight: 500;
  line-height: 33px;
}
.link-box {
  display: flex;
}
.header-link {
  width: 120px;
  height: 36px;
  border-radius: 4px;
  border: solid 1px #31c0ce;
  color: #31c0ce;
  text-align: center;
  line-height: 36px;
  font-size: 18px;
  cursor: pointer;
}
.header-link:nth-of-type(2) {
  margin-left: 20px;
}
.header-link:hover {
  border: solid 1px #70dae4;
  color: #70dae4;
}
.tool-header {
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  padding: 0 29px;
  color: #333333;
}
.tool-left {
  display: flex;
}
.tool-left .hint {
  font-size: 16px;
  line-height: 22px;
}
.hide-box {
  margin-left: 60px;
}
.tool-right {
  font-size: 16px;
  line-height: 22px;
}
.hidden-checkbox {
  display: none;
}
.hide-box label {
  background-color: #fff;
  border: 1px solid #e9e9e9;
  padding: 6px;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  vertical-align: text-bottom;
  margin-left: 24px;
  margin-right: 6px;
  cursor: pointer;
  transition: all 0.3s;
}
.hidden-checkbox {
  position: relative;
}
.hidden-checkbox:checked + label {
  background-color: #70dae4;
  border: 1px solid #70dae4;
  color: #99a1a7;
  cursor: pointer;
}
.hidden-checkbox:checked + label::after {
  content: "\2713";
  font-size: 12px;
  position: absolute;
  top: -2.5px;
  left: 2px;
  color: #fff;
  cursor: pointer;
}
.hide-box {
  color: rgba(0, 0, 0, 0.43);
  font-size: 12px;
  position: relative;
  top: 2px;
}
.hide-box span {
  position: relative;
  top: 1px;
  cursor: pointer;
}
/*  */

.proper-body-box {
  width: 1200px;
  background-color: #ffffff;
  min-height: 300px;
  transition: all 0.3s;
}
.fenye {
  /* border:solid 1px red; */
  margin-top: 42px;
  margin-bottom: 42px;
  display: flex;
  justify-content: center;
}

li:not(.disabled).active {
  border: solid 1px red;
  background-color: #31c0ce !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  border: solid 1px red;
  background-color: #31c0ce !important;
}
.fenye {
  margin-top: 42px;
  margin-bottom: 42px;
  display: flex;
  justify-content: center;
}
.ad-list-box {
  background-color: #ffffff;
}
.empty-box {
  height: 300px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #cccccc;
}
.type-info-box {
  display: flex;
  padding: 0 29px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
  line-height: 54px;
}
.list-info {
  font-size: 12px;
  color: #666666;
}
.coin-box {
  width: 132px;
}
.useable-box {
  width: 220px;
}
.frost-box {
  width: 160px;
}
.ttm-box {
  width: 256px;
}
.locked-box {
  width: 196px;
}
.action-box {
  width: 275px;
  text-align: right;
}
</style>
